<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="container">
			<div class="bgWhite bgRadius">
				<card :configArr="Model.configArr" @changingCondition="cardClick"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<!-- 高级搜索 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">售后订单列表</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item" @click="approval()">审核通过</div>
						</div>
					</div>
				</el-row>
				<el-table :data="Model.tableData" border style="width: 100%;"  @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" fixed></el-table-column>
					<el-table-column fixed="index" label="序号" width="50"></el-table-column>
					<el-table-column prop="saleNumber" label="售后单号" width="200">
						<template slot-scope="scope">
							<el-button type="text" @click="tableDetail(scope.row)">{{scope.row.saleNumber}}</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="originNumber" label="订单单号" width="200"></el-table-column>
					<el-table-column prop="exclusiveCode" label="定制编码" width="120"></el-table-column>
					<el-table-column prop="mobile" label="用户手机号" width="150"></el-table-column>
					<el-table-column prop="barCode" label="条码" width="200"></el-table-column>
					<el-table-column prop="orderAmount" label="订单金额" width="180"></el-table-column>
					<el-table-column prop="amountPayable" label="应付总金额" width="120"></el-table-column>
					<el-table-column prop="payAmount" label="支付金额" width="120"></el-table-column>
					<el-table-column prop="dictAfterSaleType.value" label="售后类型" width="120"></el-table-column>
					<el-table-column prop="dictPayStatus.value" label="售后单支付状态" width="120"></el-table-column>
					<el-table-column prop="dictOrderStatus.value" label="订单状态" width="120"></el-table-column>
					<el-table-column prop="dictAftersaleStatus.value" label="售后订单状态" width="200"></el-table-column>
					<el-table-column prop="customerId" label="用户id" width="200"></el-table-column>
					<el-table-column prop="status1" label="用户姓名" width="120"></el-table-column>
					<el-table-column prop="mobile" label="联系方式" width="120"></el-table-column>
					<el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
					<el-table-column prop="applyTime" label="售后申请时间" width="200"></el-table-column>
					<el-table-column fixed="right" :label="$t('common.handleOption')" width="120">
						<template slot-scope="scope">
							<div class="btnGroup">
								<div class="operate-btn" v-if="scope.row.aftersaleStatus==21||scope.row.aftersaleStatus==28||scope.row.aftersaleStatus==36"
								 @click="cancelAfterSale(scope.row.id)">
								 <!-- <div class="operate-btn" v-if="(scope.row.aftersaleStatus==21||scope.row.aftersaleStatus==28||scope.row.aftersaleStatus==36)&&scope.row.afterSaleType==40"
								  @click="cancelAfterSale(scope.row.id)"> -->
									取消售后
								</div>
								<div class="operate-btn" v-if="scope.row.aftersaleStatus==24||scope.row.aftersaleStatus==29||scope.row.aftersaleStatus==32"
								 @click="showPayDialog(scope.row.id)">
									支付
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<el-row class="pagination-cont">
				<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.pager.params.pageIndex"
				 :page-sizes="Model.pager.pageSizeArr" :pager-count="5" :page-size="Model.pager.params.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="Model.pager.pageTotal"></el-pagination>
			</el-row>
		</div>
		<!-- 弹框 -->
		<el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加收款明细</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form :model="Model.dialogForm">
					<el-form-item label="支付方式：">
						<el-select size="small" v-model="Model.dialogForm.payMethod" placeholder="请选择支付方式" style="width:200px">
							<el-option label="支付宝" value="1"></el-option>
							<el-option label="现金" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="流水号：">
						<el-input size="small" v-model="Model.dialogForm.serialNumber"></el-input>
					</el-form-item>
					<el-form-item label="支付金额：">
						<el-input size="small" v-model="Model.dialogForm.paymentMoney"></el-input>
					</el-form-item>
					<el-form-item label="支付日期：">
						<el-date-picker size="small" v-model="Model.dialogForm.payTime" type="datetime" placeholder="选择日期时间" style="width:200px">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="pay">
						确定
					</div>
					<div class="viewDialogFooterCancel" @click="Model.dialogFormVisible = false">
						取消
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking';
	import pagination from "@/components/common/pagination.vue";
	import card from '@/components/common/filterBtns';
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking,
			card
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
